<template>
    <div class="strategy-box">
        <a-row style="text-align:left">
            <a-col :span="24">
                <a-button html-type="submit" @click="save">
                    <a-icon type="save" /> 保存
                </a-button>
                <a-button class="margin-left-10" html-type="submit" @click="()=>{editStatus = false}">
                    <a-icon type="edit" /> 修改
                </a-button>
            </a-col>
        </a-row>

        <div class="form-inline mb-2" style="position:relative;display:flex;flex-direction:column;flex:auto;border:1px solid #ddd;margin-top:10px;padding-top:10px;text-align:left;">
            <div style="position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(255,255,255,0.1);z-index:2" v-if="editStatus">

            </div>
            <a-tooltip slot="suffix" placement="topLeft" :align="{offset: [500]}" title="0表示没有潜在客户数量">
                <form-input-number :class="editStatus?'editClass':''" title="业务员最多可管理潜在客户的数量" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_1" labelStyle class="mb-2" :precision="0" :min="0" />
            </a-tooltip>

            <form-select :class="editStatus?'editClass':''" title="线索公海中，客户联系人手机号码是否公开" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_9" :dataList="[{ key: 1, title: '是' },{ key: 0, title: '否'}]" class="mb-2"></form-select>

            <a-tooltip slot="suffix" placement="topLeft" :align="{offset: [500]}" title="0表示不自动释放" style="position:relative;width:100%;">
                <form-input-number :class="editStatus?'editClass':''" title="分配或领用的线索客户，在多少天内未联系，自动释放" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_8" labelStyle :precision="0" :min="0" class="mb-2" />

                <div style="margin-top:-36px;position:absolute;left:43%">
                    <a-input-search :class="editStatus?'editClass':''" addon-before="指定人:" size="small" v-model="this.editItem.crm_2_userNames" read-only @click="showUserModel(1)" @search="showUserModel(1)" />
                </div>
            </a-tooltip>

            <a-tooltip slot="suffix" placement="topLeft" :align="{offset: [500]}" title="0表示不自动释放">
                <form-input-number :class="editStatus?'editClass':''" title="潜在客户间隔在多少天未联系，自动释放" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_2" labelStyle class="mb-2" :precision="0" :min="0" />
            </a-tooltip>

            <a-tooltip slot="suffix" placement="topLeft" :align="{offset: [500]}" title="0表示不自动释放">
                <form-input-number :class="editStatus?'editClass':''" title="潜在客户在多少天内未转换为成交客户，自动释放" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_3" labelStyle class="mb-2" :precision="0" :min="0" />
            </a-tooltip>

            <form-input-number :class="editStatus?'editClass':''" title="潜在客户被释放至线索公海后，多少天内本人不能领用" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_4" labelStyle class="mb-2" :precision="0" :min="0"></form-input-number>

            <form-select :class="editStatus?'editClass':''" title="潜在客户是否可以手动转为成交客户" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_5" :dataList="[{ key: 1, title: '是' },{ key: 0, title: '否'}]" class="mb-2"></form-select>

            <form-select :class="editStatus?'editClass':''" title="领用线索公海客户是否需要审核" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_6" :dataList="[{ key: 1, title: '是' },{ key: 0, title: '否' }]" class="mb-2"></form-select>

            <a-tooltip slot="suffix" placement="topLeft" :align="{offset: [500]}" title="0表示可以修改/删除" style="position:relative;width:100%;">
                <form-input-number :class="editStatus?'editClass':''" title="新增的联系记录在多少小时后不能修改/删除" rightClass="col-sm-1" labelClass="col-sm-4" v-model="editItem.crm_7" labelStyle class="mb-2" :precision="0" :min="0" />
                <div style="margin-top:-36px;position:absolute;left:43%">
                    <a-input-search :class="editStatus?'editClass':''" addon-before="指定人:" size="small" v-model="this.editItem.crm_7_userNames" read-only @click="showUserModel(2)" @search="showUserModel(2)" />
                </div>
            </a-tooltip>

            <a-modal v-model="userVisible" title="用户选择" centered on-ok="handleok" width="300px">
                <div style="height: 400px;overflow-y:scroll;">
                    <a-input-search style="margin-bottom: 8px" placeholder="输入用户名称" @change="onChange" />
                    <div>
                        <a-tree v-model="checkedUserKeys" :tree-data="userSearchData" :show-icon="true" :expanded-keys="expandedUserKeys" @expand="expanedChange" :defaultExpandAll="true" checkable @check="userCheck">
                            <a-icon slot="user" type="user" />
                        </a-tree>
                    </div>
                </div>
                <template slot="footer">
                    <a-button key="submit" type="primary" @click="() => (userVisible = false)">确定</a-button>
                    <a-button key="back" @click="() => (userVisible = false)">关闭</a-button>
                </template>
            </a-modal>
        </div>
    </div>

</template>

<script>
import { StrategyList, StrategySave } from "@/api/crm/set";
import { TreeDataOffice } from "@/api/office";
import { officeUserListToTree, searchInTreeData } from "@/utils/tree";

export default {
    data () {
        return {
            //gw2021年8月28日14:09:00
            editStatus: true,
            //gw2021年8月28日14:09:00

            msg: "ssss",
            type: 0,
            userVisible: false,
            userSearchData: [], //用户搜索数据
            userAllData: [], //用户所有tree数据
            treeAShow: false, //搜索用户tree
            treeBShow: true, //用户tree
            expandedUserKeys: [],
            editItem: {
                crm_1: 0,
                crm_2: 0,
                crm_2_auxiliary: "",
                crm_2_userNames: "",
                crm_3: 0,
                crm_4: 0,
                crm_5: 0,
                crm_6: 0,
                crm_7: 0,
                crm_7_auxiliary: "",
                crm_7_userNames: "",
                crm_8: 0,
                crm_9: 0
            }
        };
    },
    mounted () {
        this.getStrategy();
        TreeDataOffice({ isLoadUser: 2 }).then(response => {
            const { data } = response;
            const childrenNav = [];
            officeUserListToTree(data, childrenNav, "0");
            this.userAllData = childrenNav;
            this.userSearchData = childrenNav;
        });
    },
    methods: {
        save () {
            Object.keys(this.editItem).forEach((f, index) => {
                if (this.editItem[f] == null) {
                    this.editItem[f] = 0;
                }
            });

            StrategySave(this.editItem).then(response => {
                if (response.code == 200) {
                    this.$message.success("保存成功");
                    this.getStrategy();
                    this.editStatus = true;
                }
            });
        },
        //选择用户弹窗
        showUserModel (type) {
            this.type = type;
            this.userVisible = true;
            let userKeys = [];
            if (type == 1) {
                userKeys = this.editItem.crm_2_auxiliary.split(",");
            } else {
                userKeys = this.editItem.crm_7_auxiliary.split(",");
            }

            this.checkedUserKeys = [];
            userKeys.forEach(item => this.checkedUserKeys.push(item + "_user"));
        },
        //用户tree展开
        expanedChange (key, info) {
            this.expandedUserKeys = key;
        },
        //用户搜索
        onChange (e) {
            const value = e.target.value;
            if (value) {
                const keys = [];
                const treeData = searchInTreeData(
                    keys,
                    this.userAllData,
                    "title",
                    value
                );
                this.userSearchData = treeData;
                this.expandedUserKeys = keys;
            } else {
                this.userSearchData = this.userAllData;
                this.expandedUserKeys = [];
            }
        },
        //用户tree展开
        expanedChange (key, info) {
            this.expandedUserKeys = key;
        },
        //用户tree选择
        userCheck (keys, info) {
            console.log(this.type);
            const userKeys = [];
            if (this.type == 1) {
                this.editItem.crm_2_auxiliary = "";
                this.editItem.crm_2_userNames = "";
            } else {
                this.editItem.crm_7_auxiliary = "";
                this.editItem.crm_7_userNames = "";
            }

            if (info.checkedNodes.length > 0) {
                for (let i = 0; i < info.checkedNodes.length; i++) {
                    const id = info.checkedNodes[i].data.props.id;
                    const name = info.checkedNodes[i].data.props.name;
                    if (id.indexOf("user") != -1) {
                        if (this.type == 1) {
                            this.editItem.crm_2_userNames += name + ",";
                            this.editItem.crm_2_auxiliary += id.split("_")[0] + ",";
                        } else {
                            this.editItem.crm_7_userNames += name + ",";
                            this.editItem.crm_7_auxiliary += id.split("_")[0] + ",";
                        }
                    }
                }

                if (this.type == 1) {
                    this.editItem.crm_2_userNames = this.editItem.crm_2_userNames.slice(0, this.editItem.crm_2_userNames.length - 1);
                    this.editItem.crm_2_auxiliary = this.editItem.crm_2_auxiliary.slice(0, this.editItem.crm_2_auxiliary.length - 1);
                } else {
                    this.editItem.crm_7_userNames = this.editItem.crm_7_userNames.slice(0, this.editItem.crm_7_userNames.length - 1);
                    this.editItem.crm_7_auxiliary = this.editItem.crm_7_auxiliary.slice(0, this.editItem.crm_7_auxiliary.length - 1);
                }
            }
        },

        getStrategy () {
            StrategyList().then(response => {
                const { data } = response;
                data.forEach(e => {
                    if (e.strategyCode == "crm_1") {
                        this.editItem.crm_1 = e.strategyVal;
                    }
                    if (e.strategyCode == "crm_2") {
                        this.editItem.crm_2 = e.strategyVal;
                        this.editItem.crm_2_auxiliary = e.auxiliaryValue;
                        this.editItem.crm_2_userNames = e.userNames;
                    }
                    if (e.strategyCode == "crm_3") {
                        this.editItem.crm_3 = e.strategyVal;
                    }
                    if (e.strategyCode == "crm_4") {
                        this.editItem.crm_4 = e.strategyVal;
                    }
                    if (e.strategyCode == "crm_5") {
                        this.editItem.crm_5 = parseInt(e.strategyVal);
                    }
                    if (e.strategyCode == "crm_6") {
                        this.editItem.crm_6 = parseInt(e.strategyVal);
                    }
                    if (e.strategyCode == "crm_7") {
                        this.editItem.crm_7 = parseInt(e.strategyVal);
                        this.editItem.crm_7_auxiliary = e.auxiliaryValue;
                        this.editItem.crm_7_userNames = e.userNames;
                    }
                    if (e.strategyCode == "crm_8") {
                        this.editItem.crm_8 = parseInt(e.strategyVal);
                    }
                    if (e.strategyCode == "crm_9") {
                        this.editItem.crm_9 = parseInt(e.strategyVal);
                    }
                });
            });
        }
    }
};
</script>

<style lang="less" scoped>
    .strategy-box {
        .form-inline label {
            justify-content: right !important;
        }
        .ant-input-number, .ant-input-number-input{
            padding-left:4px;
        }
        .form-group {
            width: 100%;
        }
        .editClass {
            .ant-select-selection,
            .ant-input,
            .ant-input-number {
                border: none !important;
            }

            .ant-select-arrow {
                display: none;
            }
            .ant-input-group-addon {
                border: 0;
            }
            .ant-input-suffix {
                display: none;
            }
        }
    }
</style>

